﻿<template>
    <div class="df fd-c h100">
        <el-table
            class="f-1"
            v-bind="{ ...$attrs }"
            :data="list"
            :stripe="stripe"
            :border="border"
            v-loading="loading"
            :element-loading-svg="$config.svg"
            element-loading-svg-view-box="-10, -10, 50, 50"
            :element-loading-text="t('Base.Loading')"
            :header-cell-style="{ color: '#000', backgroundColor: '#eee' }"
        >
            <slot name="table"></slot>
        </el-table>

        <el-row justify="end" class="f-mt-20">
            <el-pagination
                v-if="isPage"
                :current-page="pageNum"
                :page-size="pageSize"
                :page-sizes="[10, 20, 50, 100]"
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="pageSizeChange"
                @current-change="pageNumChange"
            />
        </el-row>
    </div>
</template>

<script setup lang="ts">
import $config from '@/config';
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
import { loading } from '@/utils/loading';

withDefaults(
    defineProps<{
        isPage?: boolean; //是否分页
        list: Record<string, any>[];
        total?: number;
        pageNum?: number;
        pageSize?: number;
        border?: boolean;
        stripe?: boolean;
    }>(),
    {
        isPage: true,
        list: () => [],
        total: 0,
        pageNum: 1,
        pageSize: 10,
        border: true,
        stripe: true,
    }
);

const emits = defineEmits(['pageSizeChange', 'pageNumChange']);

const pageSizeChange = (val: number) => {
    emits('pageSizeChange', val);
};
const pageNumChange = (val: number) => {
    emits('pageNumChange', val);
};
</script>

<style scoped lang="scss">
:deep(.el-form-item) {
    margin-bottom: 0;
}
</style>
